<template>
    <view class="home">
        <uni-forms
            :model="formData" 
            ref="form" 
            :rules="rules1" 
            validateTrigger="submit" 
            label-width="180rpx"
            err-show-type='none'
        >
            <view class="box-1">
                <uni-section
                    type="line"
                    title="个人档案" 
                    sub-title=""
                >
                </uni-section>
                <uni-forms-item
                    name="zo_ex2"
                    label="姓名"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex2"
                        type="text" 
                        placeholder="请输入姓名" 
                    />
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex3"
                    label="性别"
                    required
                >
                    <view class="checkbox-box">
                        <uni-data-checkbox
                            v-model="formData.zo_ex3" 
                            :localdata="zo_ex3Range" 
                        ></uni-data-checkbox>
                    </view>
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex4"
                    label="年龄"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex4"
                        type="digit" 
                        placeholder="请输入年龄" 
                    />
                </uni-forms-item>
                <uni-forms-item
                    name="zo_ex7"
                    label="联系电话"
                    required
                >
                    <uni-easyinput 
                        v-model="formData.zo_ex7"
                        maxlength="11"
                        type="digit" 
                        placeholder="请输入联系电话" 
                    />
                </uni-forms-item>
            </view>
            <button
                @click="onSubmit"
                style=""
                :class="['default-btn']"
            >
                <view style="font-weight: bold;">确认</view>
            </button>
         </uni-forms>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onTabItemTap } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref, onMounted, watchEffect, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getCityApi, getPlaceRetrievalApi, countkilometreApi, countmoneyApi, appSaveOrderApi, preferentialListApi, getAreaApi, getCouponCodeListApi } from '@/apis/index'
    import { isPhone, getDateTime, qqMapTransBMap, getDaysDiff, dateformatter } from '@/utils/utils'
    import uploadApi from '@/apis/uploadApi'
    import myFilesPicker from '@/components/myFilesPicker/myFilesPicker.vue'
    import myFilePicker from '@/components/myFilePicker/myFilePicker.vue'
    
    const zo_ex3Range: Raw<any[]> = markRaw([
        { value: '男', text: '男' },
        { value: '女', text: '女' },
    ])
    
    const formData: Ref<any> = ref({
        zo_ex2: '',
        zo_ex3: '',
        zo_ex4: '',
        zo_ex7: '',
    })
    const rules1: any = reactive({
        zo_ex2: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入姓名',
                },
            ],
        },
        zo_ex3: {
            rules: [
                {
                    required: true,
                    errorMessage: '请选择性别',
                },
            ],
        },
        zo_ex4: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入年龄',
                },
            ],
        },
        zo_ex7: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入联系电话',
                },{
                    validateFunction: function(rule, value, data, callback){
                        if (!isPhone(value)) {
                            callback('请输入正确的联系电话')
                        }
                        return true
                    }
                }
            ],
        },
        
        
        
    })
    const form: Ref<any> = ref(null)
    
    // 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则
    onReady(() => {
        form.value.setRules(rules1)
    })
    onLoad(async(val) => {
        // 调接口赋值
        // formData.value = 
    })
    onMounted(() => {
       
    })
   
    
    const onSubmit = async() => {
        form.value.validate().then(async(res: any) => {
            uni.switchTab({
            	url: '/pages/mine/mine'
            });
        }).catch((err: any) =>{
            console.log('表单错误信息：', err);
            uni.showToast({
                title: err[0].errorMessage,
                icon: 'error',
                duration: 1500,
                mask: true,
            });
        })
    }
  
</script>

<style lang="scss" scoped>
    .home {
        background-color: #f2f2f2;
        // height: 100vh;
        overflow: scroll;
        min-height: 100vh;
        // background: rgba(211, 211, 211, 1);
    }
    :deep(.uni-forms) {
        padding: 0rpx 20rpx 20rpx;
        box-sizing: border-box;
    }
    .box-1 {
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 20rpx;
        margin: 20rpx 0;
    }
    .money-box {
        text-align: center;
        font-weight: bold;
        .money-span-1 {
            color: rgb(153, 153, 153);
        }
        .money-span-2 {
            color: #000;
        }
    }
    .button-img {
        width: 80rpx;
        height: 40rpx;
        margin-right: 20rpx;
    }
    
    :deep(.uni-section .uni-section-header__content .distraction) {
        font-weight: bold;
    }
    .point-box-disabled-input {
        width: 100%;
    }
    // 禁用状态输入框
    :deep(.point-box-disabled-input .uni-easyinput .is-disabled ) {
        background-color: #fff !important;
        color: #999999 !important;
    }
    .checkbox-class {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        box-sizing: border-box;
    }
    .dialog-content {
        height: 800rpx;
        overflow: scroll;
        .dialog-text-1 {
            font-weight: bold;
        }
        .dialog-text-2 {
            color: #313131;
            text-indent: 70rpx;
            line-height: 50rpx;
        }
    }
    
    .my-disabled-input-box {
        width: 100%;
        :deep(.uni-easyinput .uni-easyinput) {
            background-color: #fff !important;
            font-weight: bold;
        }
    }
    :deep(.my-disabled-input-box .uni-easyinput .is-disabled ) {
        background-color: #fff !important;
        color: #999999 !important;
    }
    .hkzy {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #c7c1c1
    }
    // 组合框下拉选项
    :deep(.uni-combox) {
        background: #fff;
    }
    :deep(.uni-combox .uni-combox__selector .uni-combox__selector-scroll) {
        max-height: 80vh !important;
    }
    
    .checkbox-box {
        height: 100%; 
        display: flex;
        align-items: center;
    }
    :deep(.my-data-select-1 .uni-select__input-box) {
        width: 300rpx;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
    .disabled-btn {
        background-color: rgba(41, 121, 255, 0.6) !important;
        color: #fff9f9 !important;
        display: flex;
        justify-content: center;
        align-items: center; 
        width: 100%;
    }
    .default-btn {
        background-color: #2979ff !important;
        color: #fff !important;
        display: flex;
        justify-content: center;
        align-items: center; 
        width: 100%;
    }
</style>
